React theme brakepoints
xs: Extra small devices (less than 600px)sm: Small devices (600px and up)md: Medium devices (900px and up)lg: Large devices (1200px and up)xl: Extra large devices (1536px and up)
<Box sx={(theme) => ({ textAlign: 'center', [theme.breakpoints.up('md')]: { textAlign: 'left' }, })} > TEXT </Box> |
theme.breakpoints.up(‘md’) means @media (min-width: 900px)
So, the above code will set the textAlign to left for screen sizes greater than 900px.